<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>

  <meta name="msapplication-tap-highlight" content="no"/>
  <title>Hello World</title>
  <style>
    button {
      font-size: 1.8em;
    }
  </style>
</head>
<body style="background:#777">
<div class="app">
  <h1 id="title">Standalone page</h1>
  <div id="deviceready" class="blink">
    <p class="event listening">Connecting to Device</p>
    <p class="event received">Device is Ready</p><br/>

    <button ontouchend="back()">back</button>

  </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
  app.initialize();

  // window.addEventListener("load", doTransition, false);
//  window.addEventListener("load", function(){alert('load 2')}, false);

  document.addEventListener('backbutton', back, false);

  function back() {
    window.plugins.pagetransitions.slide({
          'direction': 'right',
          'duration': 400,
          'androiddelay': 50,
          'href': 'index.html'
        },
        function () {
          console.log('slide transition finished');
        });
  }

</script>
</body>
</html>
